<template>
  <div class="shu-lian">
    <Breadcrumb :breadStr="breadStr"></Breadcrumb>
    <el-card
      shadow="hover"
      :body-style="{ padding: '20px' }"
    >
      <el-table
        :data="shulianData"
        border
        stripe
        :default-sort="{prop: 'fenzhi'}"
      >
        <el-table-column
          sortable
          prop="shulian"
          label="熟练程度"
        >
        </el-table-column>
        <el-table-column
          sortable
          prop="fenzhi"
          label="对应分值(分)"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="showDialog(scope.row)"
            >修改分值</el-button>
            <el-dialog
              title="修改分值"
              :visible.sync="dialogVisible"
              width="30%"
              @close="closeDialog('editFenzhiFormRef')"
            >
              <span>将"{{row.shulian}}"对应的分值，修改为</span>
              <el-form
                @submit.native.prevent
                ref="editFenzhiFormRef"
                :rules="editFenzhiRules"
                :model="editFenzhiForm"
              >
                <el-form-item prop="fenzhi">
                  <el-input
                    v-model.number="editFenzhiForm.fenzhi"
                    size="mini"
                    clearable
                    maxlength="2"
                    @keyup.enter.native="submitForm(row.id)"
                  ></el-input>
                </el-form-item>
              </el-form>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
      <!-- 修改熟练度分值的对话框 -->
    </el-card>
  </div>
</template>

<script>
import Breadcrumb from '../common/Breadcrumb'
import { homeMixin } from '../../utils/mixin'
export default {
  mixins: [homeMixin],
  components: {
    Breadcrumb
  },
  data () {
    return {
      shulianData: [],
      dialogVisible: false,
      row: '',
      editFenzhiForm: {
        fenzhi: null
      },
      editFenzhiRules: {
        fenzhi: [
          { required: true, message: '请输入', trigger: 'blur' },
          { type: 'integer', message: '请输入1-2位数字', trigger: 'change' }
        ]
      }
    }
  },
  created () {
    this.getBread()
    this.getSlData()
  },
  methods: {
    // 获取熟练度以及对应分值
    async getSlData () {
      const { data } = await this.$http.get('/shulian/getlist')
      if (data && data.error_code === 0) {
        this.shulianData = data.data
      }
    },
    showDialog (row) {
      this.dialogVisible = true
      this.row = row
    },
    closeDialog () {
      this.$refs.editFenzhiFormRef.resetFields()
      this.dialogVisible = false
    },
    submitForm (id) {
      console.log(id)
      console.log('222222222222222')
      this.$refs.editFenzhiFormRef.validate((valid) => {
        if (valid) {
          this.editFenzhi(id)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    async editFenzhi (id) {
      console.log(id)
      id = id - 0
      if (!id || id < 0) {
        return
      }
      if (!this.editFenzhiForm.fenzhi || this.editFenzhiForm.fenzhi < 0) {
        // 不符合规则
        return
      }
      const { data } = await this.$http.post('/shulian/updatefenzhi', {
        id,
        fenzhi: this.editFenzhiForm.fenzhi
      })
      console.log(data)
      if (data?.error_code === 0) {
        this.getSlData()
        this.closeDialog()
      } else {
        this.$message.error(data.msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin";
</style>
